body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: auto auto;
  gap: 30px;
  place-content: center;
  background: #eafde6;
}

.folded {
  --r: 30px;
  width: 250px;
  aspect-ratio: 1.5;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 15px calc(100% - 15px), rgba(0, 0, 0, 0.4)) #88c425;
}
.folded-1 {
  border-radius: 0 0 var(--r) var(--r);
  --_m: 0, #0000 100%, #000 calc(100% + 1px);
  -webkit-mask: radial-gradient(var(--r) at 100% var(--_m)) no-repeat, radial-gradient(var(--r) at 0 var(--_m)) 100% 0 no-repeat, linear-gradient(rgba(0, 0, 0, 0) var(--r), #000 0);
          mask: radial-gradient(var(--r) at 100% var(--_m)) no-repeat, radial-gradient(var(--r) at 0 var(--_m)) 100% 0 no-repeat, linear-gradient(rgba(0, 0, 0, 0) var(--r), #000 0);
  -webkit-mask-size: var(--r);
          mask-size: var(--r);
}
.folded-2 {
  border-radius: var(--r) var(--r) 0 0;
  --_m: 100%, #0000 100%, #000 calc(100% + 1px);
  -webkit-mask: radial-gradient(var(--r) at 100% var(--_m)) 0 100% no-repeat, radial-gradient(var(--r) at 0 var(--_m)) 100% 100% no-repeat, linear-gradient(0, rgba(0, 0, 0, 0) var(--r), #000 0);
          mask: radial-gradient(var(--r) at 100% var(--_m)) 0 100% no-repeat, radial-gradient(var(--r) at 0 var(--_m)) 100% 100% no-repeat, linear-gradient(0, rgba(0, 0, 0, 0) var(--r), #000 0);
  -webkit-mask-size: var(--r);
          mask-size: var(--r);
}
.folded-3 {
  border-radius: var(--r) 0/calc(2 * var(--r)) 0;
  padding-block: var(--r);
  --_m: #0000 100%, #000 calc(100% + 1px);
  -webkit-mask: radial-gradient(var(--r) at 100% 100%, var(--_m)) 0 100% no-repeat, radial-gradient(var(--r) at 0 0, var(--_m)) 100% 0 no-repeat, conic-gradient(#000 0 0) content-box;
          mask: radial-gradient(var(--r) at 100% 100%, var(--_m)) 0 100% no-repeat, radial-gradient(var(--r) at 0 0, var(--_m)) 100% 0 no-repeat, conic-gradient(#000 0 0) content-box;
  -webkit-mask-size: var(--r) var(--r);
          mask-size: var(--r) var(--r);
}
.folded-4 {
  border-radius: 0 var(--r)/0 calc(2 * var(--r));
  padding-block: var(--r);
  --_m: #0000 100%, #000 calc(100% + 1px);
  -webkit-mask: radial-gradient(var(--r) at 100% 0, var(--_m)) no-repeat, radial-gradient(var(--r) at 0 100%, var(--_m)) 100% 100% no-repeat, conic-gradient(#000 0 0) content-box;
          mask: radial-gradient(var(--r) at 100% 0, var(--_m)) no-repeat, radial-gradient(var(--r) at 0 100%, var(--_m)) 100% 100% no-repeat, conic-gradient(#000 0 0) content-box;
  -webkit-mask-size: var(--r) var(--r);
          mask-size: var(--r) var(--r);
}